<template>
  <view class="container">
    <PosterGenerator :config="posterConfig" :showCanvas="true"></PosterGenerator>
  </view>
</template>

<script>
import PosterGenerator from '@/components/PosterGenerator/PosterGenerator.vue'

export default {
  components: { PosterGenerator },
  data() {
    return {
      posterConfig: {
        width: 375,
        height: 600,
        background: '#f5f5f5',
        borderRadius: 16,
        elements: [
          {
            type: 'image',
            src: '/static/images/common/logo.png',// 重要：为了兼容，要使用绝对路径！！！！
            x: 0,
            y: 0,
            width: 375,
            height: 200
          },
          {
            type: 'text',
            text: '前端大会 · 2025',
            x: 20,
            y: 250,
            fontSize: 24,
            color: '#333',
            fontWeight: 'bold'
          },
          {
            type: 'text',
            text: '时间：10月1日 | 地点：北京',
            x: 20,
            y: 290,
            fontSize: 14,
            color: '#666'
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    height: 600px;
  }
</style>